<template>
    <div id="AllNotice">
        <div id="headTitle">全体公告</div>
        <div id="CreateAllNotice">
            <el-input id="searchTextInput" v-model="searchTitle" placeholder="请输入搜索的内容"/>
            <el-button type="primary" @click="loadData">搜索</el-button>
            <el-button type="primary" @click="showForm">发布全体公告</el-button>
            <el-dialog
                    id="createAllNoticeForm"
                    v-model="formVisible"
                    title="发布全体公告"
                    width="30%"
            >
                <el-form ref="createAllNoticeRuleForm" :model="newNotice" :rules="createAllNoticeRules" status-icon>
                    <div>公告标题</div>
                    <el-form-item prop="noticeTitle">
                        <el-input id="input" v-model="newNotice.noticeTitle" placeholder="请输入公告标题"/>
                    </el-form-item>
                    <div>公告内容</div>
                    <el-form-item prop="noticeContent">
                        <el-input v-model="newNotice.noticeContent"
                                  placeholder="请输入公告内容"
                                  type="textarea"
                                  :autosize="{ minRows: 3, maxRows: 5 }"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="button" type="primary" @click="createAllNotice">发 布</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div id="table">
            <el-table max-height="700" :data="allNotice" border>
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="tableRowContainer">
                            <p class="tableRow">标题：{{ props.row.noticeTitle }}</p>
                            <p class="tableRow">发布者：{{ props.row.releaseUser }}</p>
                            <p class="tableRow">发布时间：{{ props.row.releaseTime }}</p>
                            <p class="tableRow">内容：{{ props.row.noticeContent }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="noticeTitle" label="标题" show-overflow-tooltip align="center"/>
                <el-table-column prop="releaseUser" label="发布者" show-overflow-tooltip width="200" align="center"/>
                <el-table-column prop="releaseTime" label="发布时间" show-overflow-tooltip align="center" width="200"/>
                <el-table-column label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button type="primary" plain @click="deleteNotice(scope.row.noticeID)">删除公告</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="pagination">
            <el-pagination
                    v-model:current-page="pageNumber"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20, 50]"
                    :small=false
                    :disabled=false
                    :background=false
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="allNoticeTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
//请求
import request from '@/utils/requset.js';
//顶部提示信息
import prompt from '@/utils/prompt.js'
//路由跳转
import router from "@/router";

export default {
    name: 'allNotice',
    data() {
        return {
            pageNumber: 1,
            pageSize: 5,
            allNoticeTotal: 0,
            searchTitle: "",
            allNotice: [],
            //新发布的缴费项目
            newNotice: {
                noticeTitle: '',
                noticeContent: '',
            },
            //要删除的缴费项目
            delete: {},
            formVisible: false,
            createAllNoticeRules: {
                noticeTitle: [
                    {required: true, message: '请输入公告标题', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度为1-20位', trigger: 'blur'},
                ],
                noticeContent: [
                    {required: true, message: '请输入公告内容', trigger: 'blur'},
                    {min: 1, max: 1000, message: '1-100字符', trigger: 'blur'}
                ],
            },
        }
    },
    created() {
        this.loadData();
    },
    methods: {
        //发布项目表单弹窗
        showForm() {
            this.formVisible = !this.formVisible;
        },
        //发布缴费项目
        createAllNotice() {
            //表单校验
            this.$refs["createAllNoticeRuleForm"].validate(valid => {
                //校验通过
                if (valid) {
                    let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
                    this.newNotice.token = token;
                    request.post(
                        "/notice/info",
                        this.newNotice
                    ).then(result => {
                        prompt(result.message, result.type);
                        if (result.code === "200") {
                            //更新数据
                            this.loadData();
                            //关闭窗口
                            this.showForm();
                            //清除表单
                            this.$refs["createAllNoticeRuleForm"].resetFields();
                            return;
                        }
                    });
                    return;
                }
                //校验未通过
                prompt("请检查信息是否填写正确！", "error");
            });
        },
        //加载公告信息
        loadData() {
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                prompt("还未登录！", "error");
                router.push({path: "/login"});
                return;
            }
            request.get("/notice/info", {
                params: {
                    token: token,
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    searchTitle: this.searchTitle,
                }
            }).then(result => {
                console.log(result)
                //请求失败
                if (result.code !== "200") {
                    prompt(result.message, result.type);
                }
                //请求成功
                this.allNotice = result.data.allNotice;
                this.allNoticeTotal = result.data.allNoticeTotal;
            })
        },
        //删除全体公告
        deleteNotice(noticeID) {
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            request.delete(
                "/notice/info", {
                    params: {
                        token: token,
                        noticeID: noticeID,
                    }
                }
            ).then(result => {
                prompt(result.message, result.type);
                //加载新数据
                this.loadData();
            });
        },
        //分页-单页数量
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.loadData();
        },
        //分页-页码
        handleCurrentChange(pageNumber) {
            this.pageNumber = pageNumber;
            this.loadData();
        },
    }
}
</script>
<style>
#AllNotice #headTitle {
    text-align: center;
    font-size: 45px;
    color: #63a1b2;
    margin: 25px auto;
}

#AllNotice #CreateAllNotice {
    margin: 15px 0;
}

#AllNotice #CreateAllNotice .el-input{
    width: 400px;
    margin-right: 10px;
}

#AllNotice #CreateAllNotice #createAllNoticeForm {
    border-radius: 10px;
}

#AllNotice #createAllNoticeForm .el-dialog__header {
    text-align: center;
}

#AllNotice #createAllNoticeForm .button {
    width: 100%;
    margin-bottom: 20px;
}

#AllNotice #table {
    border-radius: 5px;
    overflow: hidden;
    margin-top: 25px;
}

#AllNotice .tableRowContainer {
    margin: 0 500px;
}

#AllNotice .tableRow {
    font-size: 15px;
    padding: 20px;
    margin: 5px 0;
    border: 1px solid #63a1b2;
    border-radius: 10px;
}

#AllNotice #pagination {
    position: absolute;
    bottom: 1vh;
}
#createAllNoticeForm #input {
    width: 509px;
}
</style>